﻿<!DOCTYPE html>
<!--按承包商统计-->
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/static/js/common.js"></script>


    <style>
        .el-table__header thead th {
            text-align: center;
        }
    </style>
    <style>
        .el-table__body-wrapper table tbody tr td {
            text-align: center;
        }

        .el-table .cell {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak class="popupW100">
        <el-form label-position="right" ref="form" :inline="true" :model="formInline" class="demo-form-inline"
            style="margin-bottom: 15px;">
            <el-row>
                <el-col class="head-tool">
                    
<div class="new_title fl"><strong><img src="/static/images/icon1.png" />按承包商统计列表</strong></div>

                    <span>
                        <btn :text="col.btnSelect" imgsrc="/static/images/search.png" linetype="4" @click="onSubmit">
                        </btn>
                    </span>
                </el-col>
            </el-row>
            <el-row>
                <el-col :xs="12" :sm="8" :md="6" :lg="6" :xl="6">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{RisksManagement.RiskEChart.Contractor+mark.m}}
                                </template>
                                <el-select @visible-change="visibleChange" v-model="formInline.model.Contractor" slot="suffix"
                                    :placeholder="RisksManagement.RiskEChart.Contractor">
                                    <el-option label="请选择" value=""></el-option>
                                    <el-option v-for="item in Contractors" :label="item.contractorName" :value="item.contractor">
                                    </el-option>
                                </el-select>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>


                <el-col :xs="12" :sm="8" :md="6" :lg="6" :xl="6">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{RisksManagement.RiskEChart.StatisticalTime+'开始'+mark.m}}
                                </template>
                                <el-date-picker v-model="formInline.model.TimeArrayBegin" type="date" slot="suffix" format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
                                    size="mini" placeholder="选择日期">
                                </el-date-picker>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
                <el-col :xs="12" :sm="8" :md="6" :lg="6" :xl="6">
                    <div class="elst-select-mini">
                        <el-form-item>
                            <el-input size="mini">
                                <template slot="prepend">
                                    {{RisksManagement.RiskEChart.StatisticalTime+'结束'+mark.m}}
                                </template>
                                <el-date-picker v-model="formInline.model.TimeArrayEnd" type="date" slot="suffix" format="yyyy-MM-dd" value-format="yyyy-MM-dd" 
                                    size="mini" placeholder="选择日期">
                                </el-date-picker>
                            </el-input>
                        </el-form-item>
                    </div>
                </el-col>
            </el-row>
        </el-form>
        <el-col :span="24">
            <el-table stripe ref="table" :data="ListItem.tableData" :height="ListItem.tableHeight" border
                @selection-change="handleSelectionChange" row-style="height:10px" style="width: 100%">
                <!--:span-method="objectSpanMethod"-->
                <!--<el-table-column type="selection" align="center" width="55">
                </el-table-column>-->
                <el-table-column type="index" :label="RisksManagement.RiskEChart.id" :index="indexMethod" width="50">
                </el-table-column>
                <el-table-column prop="contractorName" 
                    :label="RisksManagement.RiskEChart.ContractorName">

                </el-table-column>
                <el-table-column prop="riskCount" :label="RisksManagement.RiskEChart.RiskCount" width="100">
                </el-table-column>
            </el-table>
            <el-row type="flex" justify="end">


                <el-pagination ref="page" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="ListItem.currentPage" :page-sizes="ListItem.pagesizes" :page-size="ListItem.pagesize"
                    :layout="ListItem.layout" :total="ListItem.total">
                </el-pagination>

            </el-row>
        </el-col>
    </div>
    <script type="text/javascript">
        //获取分页数据
        function GetPageData1(mythis, currentIndex, url) {
            mythis.formInline.offset = (currentIndex - 1) * mythis.ListItem.pagesize;
            mythis.formInline.limit = mythis.ListItem.pagesize;
            var currObj = mythis;
            myAjax("post", mythis, url, { model: mythis.formInline.model, offset: 0, limit: 10 }, function (response) {
                console.log(response);
                if (response.data.pageData.length == 0) {
                    currObj.ListItem.tableData = [];
                    currObj.ListItem.total = 0;
                } else {
                    currObj.ListItem.tableData = response.data.pageData;
                    currObj.ListItem.total = response.data.pageData.length;
                }
            });

        }
        app = new Vue({
            el: '#app',
            data: function () {
                return {
                    defaultProps: {
                        children: 'children',
                        label: 'label'
                    },
                    //页面内数据初始化
                    ListItem: ListItem,
                    Contractors: [],
                    formInline: {
                        model: {
                            //Contractor: '',
                            TimeArrayBegin: '',
                            TimeArrayEnd: '',

                        },

                        offset: 0,
                        limit: 10
                    }
                }
            },
            created: function () {
                //var currApp = this;
                //window.onresize = function () {
                //    currApp.ListItem.tableHeight = window.innerHeight -
                //        currApp.$refs.table.$el.offsetTop - 60;
                //    if (currApp.ListItem.tableHeight < 112) {
                //        currApp.ListItem.tableHeight = 112;
                //    }
                //    //控制tree高度
                //    //currApp.TreeStyle.height = currApp.ListItem.tableHeight + "px";
                //}
            },
            mounted: function () {
                //this.Contractors = getDicData('12');//字典内容
                //初始化数据
                this.GetPageData(1);
                //列表高度自适应
                tablehigh(this);
            },
            methods: {
                //解決edge下select bug
                visibleChange: function (isVisible) {
                    visibleChange(isVisible)
                },
                //表格序号连续化
                indexMethod: function (index) { return (this.ListItem.currentPage - 1) * this.ListItem.pagesize + index + 1; },
                //getDicValue: function (row, column, cellValue, index) {
                //    return getDicValue('12', cellValue).length > 20 ? getDicValue('12', cellValue).substr(0, 20) : getDicValue('12', cellValue);
                //},
                //获取分页数据
                GetPageData: function (currentIndex) { GetPageData1(this, currentIndex, '/api/YH_StandingBookChart/GetContractorStatistics') },
                //查询方法
                onSubmit: function () {
                    //console.log(this.formInline.model.TimeArray)
                    onSubmit(this);
                },
                //pagesize改变 触发方法
                handleSizeChange: function (val) { handleSizeChange(this, val); },
                //跳页触发方法
                handleCurrentChange: function (val) { handleCurrentChange(this, val); },
                //承包商集合
                getContractors: function () {
                    var mythis = this;
                    myAjax("post", mythis, '/api/YH_StandingBookChart/GetContractorStatistics', { model: {}, offset: 0, limit: 100 }, function (response) {                       
                        if (response.data.pageData.length == 0) {
                            currObj.Contractors = [];
                        } else {
                            currObj.Contractors = response.data.pageData;
                        }
                    });
                },
            }
        });

    </script>
</body>

</html>